<template>
	<div>
		<div class="page-infinite-wrapper" style="height: 378px;">
			<ul v-infinite-scroll="loadMore()" infinite-scroll-disabled="loading" infinite-scroll-distance="10" class="page-infinite-list">
				<li v-for="item in list" track-by="$index" class="page-infinite-listitem">{{item}}</li>
			</ul>
			<p class="page-infinite-loading" style="display: none;">
				<div style="height: 28px;">
				</div>
				加载中...
			</p>
		</div>
	</div>
</template>
<script>
	import Vue from 'vue';
	//弹窗
	import {
		InfiniteScroll
	} from 'mint-ui';
	Vue.use(InfiniteScroll);
	import '../../assets/css/infinite-scroll.css';
	export default {
		data() {
				return {
					loading: false,
					list: [1, 2, 3, 4, 5, 6, 7, 8, 8, 10]
				}
			},
			components: {

			},
			methods: {
				loadMore: function() {
					this.loading = true;
					setTimeout(() => {
						let last = this.list[this.list.length - 1];
						for(let i = 1; i <= 10; i++) {
							this.list.push(last + i);
						}
						this.loading = false;
					}, 1000);
				}
			}
	}
</script>
<style lang="scss">
	@import "../../assets/css/_functions.scss";
	@import "../../assets/css/_variables.scss";
	body {
		background: #fff!important;
	}
</style>